<template>
  <div class="cause box box-ver">
    <div :class="{act: !empty}" @click="focusIpt()" class="title">{{title}}</div>
    <input v-model="value" @blur="blurIpt()" @focus="focusIpt()" ref="ipt" class="box box-fh" type="text" maxlength="20">
    <div class="icon icon-edit"></div>
  </div>
</template>

<script>

export default {
  name: 'animationInput',
  props: {
    title: {
      type: String,
      default () {
        return '请输入'
      }
    }
  },
  data () {
    return {
      empty: true,
      // isFocus: false,
      value: ''
    }
  },
  mounted () {
    console.log(1111111111111)
  },
  methods: {
    focusIpt () {
      this.$refs.ipt.focus()
      // this.isFocus = true
      if (!this.value) this.empty = false
    },
    blurIpt () {
      // this.isFocus = false
      if (!this.value) this.empty = true
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/config';
@import '../assets/css/mixins';
.cause{
  background-color:#FFF;
  padding:.25rem .3rem;
  position: relative;
  font-size:.3rem;
  transition: all .3s;
  // border: 1px solid #999;
  .title{
    position: absolute;
    left:.3rem;
    top:.25rem;
    z-index:2;
    width:100%;
    font-size:.4rem;
    transition: all .3s;
    &.act{
      top:0;
      left:0;
      position: relative;
      padding-bottom:.1rem;
      font-size:.26rem;
    }
  }
  input{
    border-bottom:1px solid #333;
    width:92%;
    height:.5rem;
    line-height: .5rem;
  }
}
.icon-edit{
  position: absolute;
  bottom:.32rem;
  right:.3rem;
  width:.46rem;
  height:.46rem;
  &.act{
    opacity:0;
  }
}
</style>
